<template>
    <div>
      <h2>推荐查询</h2>
      <div class="searchn">
      <el-input v-model="input" placeholder="Please input" clearable />
      <button class="buttom" @click="sendData">SEARCH</button>
      </div>

    <el-table :data="this.Braid_info" style="width: 100%;height:3rem; top: 10px; border-radius: 10px;" :cell-style="{ textAlign: 'center' }" class="tableBox"
      row-class-name="rowTableItem1" header-row-class-name="headerTableItem" :header-cell-style="{background:'rgba(11, 11, 11,0.5)',color:'white'}">
      <el-table-column prop="name" label="搭配优选" />
      <el-table-column prop="count" label="推荐值" />
    </el-table>

    <el-table :data="this.B_recom" style="width: 100%;height: 3rem; top: .5rem ;border-radius: 10px;" :cell-style="{ textAlign: 'center' }" class="tableBox"
      row-class-name="rowTableItem2" header-row-class-name="headerTableItem" :header-cell-style="{background:'rgba(11, 11, 11,0.5)',color:'white'}">
      <el-table-column prop="name" label="相关推荐" />
      <el-table-column prop="count" label="关联值" />
    </el-table>
    </div>
  </template>
  
  <script>
  import api from "@/api";
  import { ref } from 'vue'
  

  export default {
    data(){
      return{
        input: ref(''),
        Braid_info:[],
        B_recom:[]
      };
    },

  methods:{
    async sendData(){
          try {
            const response = await api.post('/get_Braid_info?author_name='+this.input);
            const recom = await api.post('/Braid_recom?author_name='+this.input);
            this.Braid_info = response;
            this.B_recom = recom;
            console.log('get_Braid:',this.B_recom);
            console.log('get_Braid_info:',this.Braid_info);
            // Handle the API response as needed
          } catch (error) {
            console.error('Error:', error);
            // Handle the error
          }
        //   async fetchLinkByName(name) {
        //   try {
        //     const response = await api.getLinkByName(name);
        //     this.linkname = response.data; // 假设服务器返回一个名为"name"的字段
        //     console.log(this.linkname);
        //   } catch (error) {
        //     console.error(error);
        //   }
        // }
      }
    }
  }
  </script>
  
  <style scoped>
  .rowTableItem2{
    background: rgba(11, 11, 11, 0.5);
    color: white;
  }
  .rowTableItem1{
    background: rgba(11, 11, 11, 0.5);
    color: white;
  }


  </style>